import { Content } from "antd/lib/layout/layout";
import { List, Card, Layout, Avatar, Spin } from "antd";
import Meta from "antd/lib/card/Meta";
import { selectAllContent } from "../home.slice";
import { useSelector } from "react-redux";

export const ContentScreen = () => {
  const content = useSelector(selectAllContent);

  return (
    <Content className="content">
      <Layout className="listBox">
        {content.length === 0 ? (
          <Spin size="large" />
        ) : (
          <List
            grid={{
              gutter: 16,
              xs: 1,
              sm: 1,
              md: 2,
              lg: 2,
              xl: 3,
              xxl: 3,
            }}
            dataSource={content}
            renderItem={(item) => (
              <List.Item>
                <Card>
                  <Meta
                    className="description"
                    avatar={
                      <Avatar
                        shape="square"
                        className="avatar"
                        src={item.imgUrl}
                      />
                    }
                    title={item.title}
                    description={item.description}
                  />
                </Card>
              </List.Item>
            )}
          />
        )}
      </Layout>
    </Content>
  );
};
